﻿<template>
  <div>
    <sticky :className="'sub-navbar'">
      <div class="filter-container">
        <el-input @keyup.enter.native="handleFilter" size="mini" style="width: 200px;" class="filter-item" :placeholder="'名称'" v-model="listQuery.key">
        </el-input>

        <el-button class="filter-item" size="mini" icon="el-icon-search" @click="handleFilter">搜索</el-button>
        <el-button type="primary" size="mini" v-if="checkPermission('StoreWxShipping', 'btnAdd')" icon="el-icon-plus" @click="openEdit()">新增</el-button>
        <el-button type="danger" size="mini" v-if="checkPermission('StoreWxShipping', 'btnDel')" icon="el-icon-delete" @click="handleDeleteArr">删除</el-button>
      </div>
    </sticky>
    <div class="app-container ">

      <div class="bg-white">
        <el-table ref="mainTable" :key='tableKey' :data="list" v-loading="listLoading" border fit highlight-current-row style="width: 100%;" @row-click="rowClick" @selection-change="handleSelectionChange">
          <!-- <el-table-column type="selection" align="center" width="55"></el-table-column> -->
          <el-table-column prop="orderNo" label="订单号" width="200" show-overflow-tooltip></el-table-column>
          <el-table-column prop="strShippingType" label="物流方式" width="100" show-overflow-tooltip></el-table-column>
          <el-table-column prop="expressName" label="微信物流" width="100" show-overflow-tooltip></el-table-column>
          <el-table-column prop="expressNo" label="物流单号" width="150" show-overflow-tooltip></el-table-column>
          <el-table-column prop="strStatus" label="状态" width="100" show-overflow-tooltip></el-table-column>
          <el-table-column prop="errMsg" label="微信错误信息" show-overflow-tooltip></el-table-column>
          <el-table-column prop="createTime" label="创建时间" width="170" show-overflow-tooltip></el-table-column>
          <el-table-column align="center" label="操作" width="130" class-name="small-padding fixed-width">
            <template slot-scope="scope">
              <el-button type="text" v-if="checkPermission('StoreWxShipping','btnEdit')" @click="openEdit(scope.row)">重发</el-button>
              <el-button type="text" v-if="checkPermission('StoreWxShipping', 'btnDel')" @click="handleDelete([scope.row])">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="handleCurrentChange" />
      </div>
    </div>
    <EditForm ref="EditForm" @handleSubmit="loadList" />
  </div>
</template>

<script>
import * as apiStoreWxShipping from '@/api/order/storewxshipping'
import Sticky from '@/components/Sticky'
import Pagination from '@/components/Pagination'
import EditForm from './modules/EditForm'
export default {
  components: { Sticky, EditForm, Pagination },
  directives: {},
  data() {
    return {
      multipleSelection: [], // 列表checkbox选中的值
      tableKey: 0,
      list: null,
      total: 0,
      listLoading: true,
      listQuery: { // 查询条件
        page: 1,
        limit: 20,
        key: undefined,
      }
    }
  },
  created() {
    this.loadList()
  },
  methods: {
    rowClick(row) {
      this.$refs.mainTable.clearSelection()
      this.$refs.mainTable.toggleRowSelection(row)
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    loadList() {
      this.listLoading = true
      apiStoreWxShipping.load(this.listQuery).then(res => {
        this.list = res.result
        this.total = res.count
        this.listLoading = false
      })
    },
    handleFilter() {
      this.listQuery.page = 1
      this.loadList()
    },
    handleSizeChange(val) {
      this.listQuery.limit = val
      this.loadList()
    },
    handleCurrentChange(val) {
      this.listQuery.page = val.page
      this.listQuery.limit = val.limit
      this.loadList()
    },
    // 打开编辑框
    openEdit(row) {
      this.$refs.EditForm.show(row)
    },
    handleDeleteArr() {//列表选中删除
      if (this.multipleSelection.length < 1) {
        this.$message({
          message: '至少删除一个',
          type: 'error'
        })
        return
      }
      this.handleDelete(this.multipleSelection)
    },
    handleDelete(rows) { // 多行删除
      apiStoreWxShipping.del(rows.map(p => p.id)).then(() => {
        this.$notify({
          title: '成功',
          message: '删除成功',
          type: 'success',
          duration: 2000
        })
        rows.forEach(row => {
          const index = this.list.indexOf(row)
          this.list.splice(index, 1)
        })
      })
    },

  }
}
</script>
<style scoped>
.dialog-mini .el-select {
  width: 100%;
}
</style>
